<template>
  <el-card>
    <template #header>
      <el-row :gutter="10" style="float: right">
        <el-button @click="emit('addColumn')" type="primary">新 增</el-button>
        <el-button plain type="primary" @click="update"
          >更新表字段顺序</el-button
        >
        <el-button @click="deleteRow" :icon="Delete" type="danger" plain
          >删 除</el-button
        >
      </el-row>
    </template>
  </el-card>
  <el-scrollbar :height="h">
    <ts-card header="字段列表" style="margin-top: 10px">
      <el-table
        ref="table"
        :data="dataList"
        :key="toggleIndex"
        @cell-click="cellMouseEnter"
        height="600"
        @select="selectRow"
        @select-all="selectAll"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="" width="58">
          <template #default>
            <el-tag class="move" style="cursor: move">
              <DCaret style="width: 1em; height: 1em" />
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="label" label="名称">
          <template #default="scope">
            <span v-if="!scope.row.labelShow" @click="cellClick(scope.row)">{{
              scope.row.label
            }}</span>
            <el-input
              v-else
              v-model="scope.row.label"
              @blur="labelCellBlur(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="字段名"></el-table-column>
        <el-table-column prop="fixed" label="固定列"></el-table-column>
        <el-table-column prop="columnType" label="列类型"></el-table-column>
        <el-table-column prop="width" label="宽度"></el-table-column>
        <el-table-column label="宽度是否计算">
          <template #default="scope">
            <el-switch v-model="scope.row.flexColumnWidth" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="align" label="排列位置"></el-table-column>
        <el-table-column prop="formatter" label="格式化"></el-table-column>
        <el-table-column fixed="right" label="操作" width="60">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="edit(scope)"
              >修 改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </ts-card>
  </el-scrollbar>
</template>
<script setup>
import { ref, defineModel, onMounted, computed, nextTick } from "vue";
import { Plus, Delete, DCaret, Edit } from "@element-plus/icons-vue";
import {ElMessageBox} from 'element-plus'
import API from "@/api/model/report.js";
import Sortable from "sortablejs";
const emit = defineEmits(["toDetail", "addColumn",'delete']);
const h = computed(() => {
  var elementHeight = document.querySelector(".el-main").offsetHeight;
  return elementHeight + "px";
});
const props = defineProps({
  fileName: { type: String, default: "" },
  tableId: { type: String, default: "" },
});
const table = ref(null);
const toggleIndex = ref(0);
const dataList = defineModel("fieldList");
const deleteList = ref([]);
onMounted(() => {
  rowDrop();
});
const rowDrop = () => {
  const tbody = table.value.$el.querySelector(".el-table__body-wrapper tbody");
  Sortable.create(tbody, {
    handle: ".move",
    animation: 300,
    ghostClass: "ghost",
    onEnd({ newIndex, oldIndex }) {
      const tableData = dataList.value;
      const currRow = tableData.splice(oldIndex, 1)[0];
      tableData.splice(newIndex, 0, currRow);
      toggleIndex.value += 1;
      nextTick(() => {
        rowDrop();
      });
    },
  });
};
const cellClick = (val) => {
  val.labelShow = true;
};
const labelCellBlur = (val) => {
  val.labelShow = false;
};
const update = async () => {
  let res = await API.designerField.post({
    bean: { fileName: props.fileName, tableId: props.tableId },
    dataList: dataList.value,
  });
  if (res.code == 200) {
    emit('update')
    emit('delete')
  }
};
const edit = (scope) => {
  emit("toDetail", Object.assign(scope.row,{tableId:props.tableId}));
};
const selectRow = (rows, row) => {
  deleteList.value = rows;
};
const selectAll = (rows) => {
  deleteList.value = rows;
};
const deleteRow = async () => {
  if (deleteList.value.length > 0) {
    let param = {
      fileName: props.fileName,
      tableId: props.tableId,
      dataList: deleteList.value.map(ele=>{return ele.prop}),
    };
    ElMessageBox.confirm('确定删除吗？', "提示", {
      type: "warning",
      confirmButtonText: "确定",
      confirmButtonClass: "el-button--danger",
    })
      .then(() => {
        let res = API.deleteField.post(param);
        if (res.code == 200) {
          emit("delete");
        }
      })
      .catch(() => {});
  } else {
    ElMessage({
      message: "请选择表格记录",
      type: "warning",
    });
  }
};
</script>
<style lang="less" scoped></style>